<template>
  <div class="Permissions">
  
    <el-row class="rowtwo">
      <span class="spantwo">自定义图标权限</span>
      <el-input v-model="input" :disabled="true" class="input"></el-input>
      <span class="el-icon-question">默认0 为不限制</span>
    </el-row>
    <h4>详细权限</h4>
    <el-checkbox-group v-model="anthority_name" @change="getc" size="mini">
     <el-row class="row1">
      <el-checkbox label="客户管理" border class="role-checkbox"><i class="el-icon-menu">客户管理</i></el-checkbox>
      <el-checkbox label="跟单管理" border class="role-checkbox"><i class="el-icon-document">跟单管理</i></el-checkbox>
      <el-checkbox label="订单管理" border class="role-checkbox"><i class="el-icon-setting">订单管理</i></el-checkbox>
      <el-checkbox label="合同管理" border class="role-checkbox"><i class="el-icon-tickets">合同管理</i></el-checkbox>
      <el-checkbox label="内部通讯录" border class="role-checkbox"><i class="el-icon-phone-outline">内部通讯录</i></el-checkbox>
    </el-row>
    <el-row class="row2">
      <el-checkbox label="财务管理" border class="role-checkbox"><i class="el-icon-s-finance">财务管理</i></el-checkbox>
      <el-checkbox label="客户公海" border class="role-checkbox"><i class="el-icon-s-custom">客户公海</i></el-checkbox>
      <el-checkbox label="员工管理" border class="role-checkbox"><i class="el-icon-toilet-paper">员工管理</i></el-checkbox>
      <el-checkbox label="数据统计" border class="role-checkbox"><i class="el-icon-s-promotion">数据统计</i></el-checkbox>
      <el-checkbox label="商品进销存" border class="role-checkbox"><i class="el-icon-takeaway-box">商品进销存</i></el-checkbox>
    </el-row>
    <el-row class="row3">
      <el-checkbox label="售后管理" border class="role-checkbox"><i class="el-icon-headset">售后管理</i></el-checkbox>
      <el-checkbox label="内部公告" border class="role-checkbox"><i class="el-icon-files">内部公告</i></el-checkbox>
      <el-checkbox label="工作报告" border class="role-checkbox"><i class="el-icon-smoking">工作报告</i></el-checkbox>
      <el-checkbox label="文件管理" border class="role-checkbox"><i class="el-icon-folder-opened">文件管理</i></el-checkbox>
      <el-checkbox label="回收站" border class="role-checkbox"><i class="el-icon-delete">回收站</i></el-checkbox>
    </el-row>
    <el-row class="row4">
      <el-checkbox label="内部信息" border class="role-checkbox"><i class="el-icon-notebook-1">内部信息</i></el-checkbox>
      <el-checkbox label="系统权限" border class="role-checkbox"><i class="el-icon-setting">系统权限</i></el-checkbox>
      <el-checkbox label="工单管理" border class="role-checkbox"><i class="el-icon-finished">工单管理</i></el-checkbox>
      <el-checkbox label="车辆管理" border class="role-checkbox"><i class="el-icon-bicycle">车辆管理</i></el-checkbox>
      <el-checkbox label="知识库" border class="role-checkbox"><i class="el-icon-apple">知识库</i></el-checkbox>
    </el-row>
    <el-row class="row5">
      <el-checkbox label="其他权限" border class="role-checkbox"><i class="el-icon-more">其他权限</i></el-checkbox>
    </el-row>
    <el-row class="row6">
      <el-button class="savebtn" @click="save">保存</el-button>
      <el-button class="closebtn"  @click="open">关闭</el-button>
    </el-row>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "Permissions",
  data() {
    return {
      roleinput:'',
      anthority_name:[]
    }
  },
  methods: {
    open() {
        this.$confirm('确定要关闭当前页面吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '关闭成功!'
          },
          this.$router.push('/staff/staff-list'));
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消关闭'
          });          
        });
      },
    getc(){
      console.log(this.anthority_name)
    }
  },
  created() {
    
  }
}
</script>

<style lang="scss" scoped>
  h3{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #eff0ef;
    border-bottom: 1px solid #cccccc;
  }

  h4{
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .rowone{
    width: 550px;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
  }

  .roleName{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    background: #eff0ef;
    padding-right: 15px;
    padding-left: 40px;
  }

  .input{
    width: 250px;
  }

  .rowtwo{
    width: 550px;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
  }

  .spantwo{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    background: #eff0ef;
    padding-right: 14px;
  }

  .row2, .row3, .row4, .row5{
    margin-top: 20px;
  }

  .row6{
    margin-top: 30px;
    padding-left: 320px;
  }

  .savebtn{
    background: #5a9bf9;
    color: white;
    border: none;
  }

  .closebtn{
    background: #e47470;
    color: white;
    border: none;
  }
  


</style>